<template>

    <div id="app">
   <div class="big">
        <!-- 头部 -->
        <div class="box10"></div>
        <div class="h">
            <div class="heade">
                <div @click="fn">
                    <img src="../assets/img/教育APP切图/未标题-1.png" alt="" class="m1">
                </div>
                <div class="h1">
                    <p>境内</p>
                    <p>境外/港澳台</p>
                </div>
            </div>
            <!-- nav -->
            <div class="nav">
                <input type="text" placeholder="输入城市名、拼音或首字母查询" class="search" v-model="inp" @keyup="search(inp)">
                <img src="../assets/img/教育APP切图/首页/搜索@2x.png" alt="">
                <ul class="contet" v-show="show">
                    <li v-for="r in searchList" :key="r._id" @click="hot1(r.name)">{{r.name}}</li>
                </ul>
            </div>
        </div>
        <!-- st1 -->
        <div class="st1">
            <p class="p1">{{low}}</p>
            <div class="st11">
                <i :class="icon | filWeather(icon)"></i>
                <span class="st111">{{icon}}</span>
                <span>12/02</span>
            </div>
            <div class="st12">
                <div class="st121" v-for="(r,i) in daHuang" :key=i>
                    <p>{{r.date.substr(r.date.length - 3, 3)}}</p>
                    <i :class="r.type | filWeather(r.type)"></i>
                    <span>{{r.low.split(' ')[1]}}</span>
                </div>
            </div>
        </div>
        <!-- st2 -->
        <div class="st2">
            <p>定位/最近访问</p>
            <div class="st21"> <i class="iconfont icon-icon_location"></i> <span>{{city}}</span></div>
        </div>
        <!-- st3 -->
        <div class="st3">
            <p>热门城市</p>
            <div class="st31">
                <div v-for="(r,i) in hotList" :key="i" @click="hot(r)">{{r}}</div>
            </div>
        </div>
        <!-- st4 -->
        <div class="st4">
            <div class="st41" v-for="r in zimu" :key='r._id'>
                <h3 style="font-size:3rem" :id='r.title'>{{r.title}}</h3>
                <p v-for="(item,i) in r.lists" :key='i' @click="hot(item)">{{item}}</p>
            </div>
        </div>
        <!-- fixed -->
        <div class="dw">
            <i class="iconfont icon-shangjiantoushixinxiao"></i>
            <div class="dw1">
                <div v-for="r in zimu" :key='r._id'><a :href='"#"+r.title'>{{r.title}}</a></div>
            </div>
        </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "myWeather",
  components: {},
  data() {
      return {
          city:'南京',
          hotList:['杭州','北京','上海','广州','深圳','成都','重庆','天津','苏州','武汉','西安',''],
          low:'',
          icon:'',
          data:'',
          daHuang:[],
          zimu:[],
          inp:'',
          show:false,
          searchList:[]
      }
  },
  filters:{
            filWeather(e){
                if(e==='多云') return 'iconfont icon-duoyun'
                if(e==='小雨') return 'iconfont icon-xiaoyu'
                if(e==='中雨') return 'iconfont icon-zhongyu'
                if(e==='大雨') return 'iconfont icon-dayu'
                if(e==='小雪') return 'iconfont icon-xiaoxue'
                if(e==='中雪') return 'iconfont icon-zhongxue'
                if(e==='大雪') return 'iconfont icon-daxue'
                if(e==='阴') return 'iconfont icon-tianqi-yin'
                if(e==='雷阵雨') return 'iconfont icon-tianqi-leidiantianqi'
                if(e==='晴') return 'iconfont icon-qing'
            }
        },
  methods: {
      fn(){
          this.$router.go(-1)
      },
      hot(e){
          this.city=e
          this.getWeather(e)
          scrollTo(0,0)
          sessionStorage.setItem('city',e)
      },
      hot1(e){
          this.city=e
          this.getWeather(e)
          this.show=false
          this.inp=e
          scrollTo(0,0)
          sessionStorage.setItem('city',e)
      },
      search(e){
         if(e){
             this.show=true
             this.$axios({
                url:'/api/Handler/citys',
                methods:'get',
                params:{
                name:e,
                }
        }).then(res=>{
            if (res.msg==="success") {
                this.searchList=res.data
                console.log(this.searchList);
            }
        }).catch(err=>{
            console.log(err);
        })
         }else{
             this.show=false
         }
      },
      getWeather(e){
                 this.$axios({
                url:"http://wthrcdn.etouch.cn/weather_mini?city=" +e,
                methods:'get'}).then(res=>{
                        if(res.status===1000){
                        // console.log(res);
                        this.data=res.data.forecast
                        this.low=this.data[0].low.split(" ")[1]
                        this.icon=this.data[0].type
                        this.daHuang=this.data
                        // console.log(this.daHuang);
                        }
                    }).catch(err=>{
                        console.log(err);
                    })
         }
    },
    mounted() {
        this.getWeather(this.city);
        this.$axios({
            url:'/api//Handler/citylists'
        }).then(res=>{
            if(res.msg === "success"){
                console.log(res.data);
                this.zimu=res.data
            }
        }).catch(err=>{
            console.log(err);
        })
    },
};
</script>
<style lang="scss" scoped>
.big {
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    padding: 0 2rem;
    align-items: center;
}

.st11 i,
.st121 i,
.st21 i {
    font-size: 3rem;
}

.box10 {
    height: 17rem;
}

.h {
    position: fixed;
    top: 0;
    background: #fff;
    padding: 0 2rem;
    width: 100%;
}

.heade {
    height: 10rem;
    width: 100%;
    padding-right: 20rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    img {
        width: 3.6rem;
        height: 2.4rem;
    }
}

.h1 {
    width: 32.2rem;
    height: 6rem;
    font-size: 2.4rem;
    background: #eee;
    border-radius: 1rem;
    display: flex;
    justify-content: space-around;
    align-items: center;
    p {
        width: 14.3rem;
        height: 5.4rem;
        background: #eee;
        border-radius: 1rem;
        text-align: center;
        line-height: 5.4rem;
        &:hover {
            background: #fff;
        }
    }
}


/* nav */

.nav {
    position: relative;
    img {
        width: 2.6rem;
        height: 2.6rem;
        position: absolute;
        left: 1rem;
        top: 1.5rem;
    }
    input {
        width: 69.7rem;
        height: 6rem;
        font-size: 3rem;
        background: #f5f5f5;
        border-radius: 1rem;
        line-height: 6rem;
        padding-left: 6rem;
    }
}

.contet {
    width: 100%;
    height: 26rem;
    overflow-y: scroll;
    padding: 2rem 3rem;
    // display: none;
    background: #fff;
    border-radius: 0 0 2rem 2rem;
    position: absolute;
    font-size: 3rem;
    top: 6rem;
    li {
        height: 8rem;
        line-height: 8rem;
        border-bottom: 0.1rem solid #ccc;
    }
}


/* st1 */

.st1 {
    width: 69.7rem;
    height: 23.5rem;
    border-radius: 1rem;
    color: #fff;
    font-size: 2rem;
    padding: 1rem 2rem 0 2rem;
    margin-top: 2rem;
    background-image: url(../assets/img/教育APP切图/tq.png);
    background-size: 69.7rem 23.5rem;
    >p {
        font-size: 3.8rem;
    }
}

.st11 {
    height: 6.2rem;
    line-height: 6.2rem;
}

.st111 {
    border-right: 0.1rem solid #fff;
    padding-right: 1rem;
}


/* st12 */

.st12 {
    width: 100%;
    height: 11.1rem;
    display: flex;
    justify-content: space-around;
    align-items: center;
}

.st121 {
    width: 6rem;
    height: 10rem;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    align-items: center;
}


/* st2 */

.st2 {
    width: 100%;
    height: 13rem;
    font-size: 2.4rem;
    color: #000;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    p {
        color: #666;
    }
}

.st21 {
    width: 14rem;
    height: 6rem;
    border: 0.1rem solid #ccc;
    border-radius: 1rem;
    text-align: center;
    line-height: 6rem;
    i {
        color: #5064eb;
    }
}


/* st3 */

.st3 {
    font-size: 2.4rem;
    width: 100%;
    >p {
        color: #666;
        margin-bottom: 2.4rem;
    }
}

.st31 {
    width: 67rem;
    height: 26rem;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
    align-items: center;
    >div {
        width: 14rem;
        height: 6rem;
        border: 0.1rem solid #ccc;
        border-radius: 0.6rem;
        color: #000;
        text-align: center;
        line-height: 6rem;
        &:last-child {
            border: none;
        }
    }
}


/* st4 */

.st4 {
    width: 100%;
    margin-top: 2rem;
}

.st41 {
    width: 100%;
    display: flex;
    flex-direction: column;
    padding-right: 4rem;
    justify-content: space-around;
    h3 {
        margin-top: 2rem;
    }
    p {
        height: 9.5rem;
        width: 100%;
        line-height: 9.5rem;
        font-size: 2.4rem;
        border-bottom: 0.1rem solid #ccc;
    }
}


/* fixed */

.dw {
    width: 1.7rem;
    height: 55rem;
    font-size: 1.8rem;
    text-align: center;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    align-items: center;
    position: fixed;
    right: 3rem;
    top: 50rem;
}

.dw1>a {
    margin-bottom: 1rem;
}

.dw i {
    font-size: 2.5rem;
}
</style>